
import BaseView from "./baseView.js";

export default class shouye extends BaseView {
    //添加css样式
    renderCss() {
        $("head").append('<link rel="stylesheet" type="text/css" href="css/dianying.css"><link rel="stylesheet" type="text/css" href="css/reset.css">')
    }
    //渲染框架结构
    render() {
        this.$el.html(`
        <!-- 头部 -->
        <header>
            <nav class="H-nav layout">
                <div class="layout H-left-div">
                    <a href="#/homepages">
                        <p class="log">
                            <span class="text">猫眼电影</span>
                            <span class="beijin"></span>
                            <span class="faguang"></span>
                        </p>
                    </a>
                    <!-- 下级菜单 -->
                    <div class="layout">
                    <span>成都
                    <ol>
                        <li class="layout">
                            <span>区:</span><a href="">武侯</a><a href="">郫都</a><a href="">双流</a><a href="">金牛</a>
                        </li>
                       
                    </ol>
                </span>
                    </div>
                    <ul class="layout H-link">
                        <li class="layout">
                            <a href="#/homepages">首页</a>
                        </li>
                        <li class="layout">
                            <a href="#/movies">电影</a>
                        </li>
                        <li class="layout">
                            <a href="#/yingyuans">影院</a>
                        </li>
                        <li class="layout">
                            <a href="javascript:;">榜单</a>
                        </li>
                        <li class="layout">
                            <a href="javascript:;">热点</a>
                        </li>
                    </ul>
                </div>
                <div class="H-right-div layout">
                    <form action="">
                        <input type="text" placeholder="找影视剧、影人、影院">
                    </form>
                    <div class="register">
                        <div>
                            <!-- 下级菜单 -->
                            <div class="yuan">
                                <div class="you">
                                </div>
                                <div class="zhongjian">
                                    <p>
                                        <a href="#/logins">登录</a>
                                        <a href="#/dingdans">我的订单</a>
                                    </p>
                                </div>
                                <div class="zuo">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </header>
        <!-- 内容 -->
        <main class="main">
            <header>
                <nav>
                    <ul class="layout H-link">
                        <li class="layout">
                            <label for="show1">正在热映</label>
                        </li>
                        <li class="layout">
                            <label for="show2">即将热映</label>
                        </li>
                        <li class="layout">
                            <label for="show3">经典影片</label>
                        </li>
                    </ul>
                </nav>
            </header>
            <input type="radio" id="show1" name="showone" checked>
            <!-- 热映 -->
            <article class="main-one">
                <i class="show showone"></i>
                <p class="show-1 showtwo-1">正在热映</p>
                <section class="catalogue">
                    <nav class="layout">
                        <p>类型:</p>
                        <ul class="layout layout11">
                            
                        </ul>
                    </nav>
                    <nav class="layout">
                        <p>地区:</p>
                        <ul class="layout layout22">
                            
                        </ul>
                    </nav>
                    <nav class="layout">
                        <p>时间:</p>
                        <ul class="layout layout33">
                            </li>
                        </ul>
                    </nav>
                </section>
                <section class="film-play">
                    <form action="" class="sort layout">
                        <ul class="layout">
                            <li class="layout">
                                <input type="radio" name="sort" id="sort-one" checked>
                                <label for="sort-one">按照热门排序</label>
                            </li>
                            <li class="layout">
                                <input type="radio" name="sort" id="sort-two">
                                <label for="sort-two">按照时间排序
                                    <i></i>
                                </label>
                            </li>
                            <li class="layout">
                                <input type="radio" name="sort" id="sort-three">
                                <label for="sort-three">按照评价排序</label>
                            </li>
                        </ul>
                        <label for="" class="layout"><input type="checkbox">可播放</label>
                    </form>
                    <ul class="layout layout44">
                        
                    </ul>
                </section>
                <!-- 翻页 -->
                <section class="page-turning">
                    <ul class="layout">
                        <li><a href="">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li><a href="">···</a></li>
                        <li><a href="">23802</a></li>
                        <li><a href="">下一页</a></li>
                    </ul>
                </section>
            </article>
            <input type="radio" id="show2" name="showone">
            <article class="main-two">
                <i class="show showtwo"></i>
                <p class="show-1 showtwo-2">即将热映</p>
                <section class="catalogue">
                    <nav class="layout">
                        <p>类型:</p>
                        <ul class="layout layout11">
                            
                        </ul>
                    </nav>
                    <nav class="layout">
                        <p>地区:</p>
                        <ul class="layout layout22">
                            
                        </ul>
                    </nav>
                    <nav class="layout">
                        <p>时间:</p>
                        <ul class="layout layout33">
                            
                        </ul>
                    </nav>
                </section>
                <section class="film-play">
                    <form action="" class="sort layout">
                        <ul class="layout">
                            <li class="layout">
                                <input type="radio" name="sort" id="sort-one" checked>
                                <label for="sort-one">按照热门排序</label>
                            </li>
                            <li class="layout">
                                <input type="radio" name="sort" id="sort-two">
                                <label for="sort-two">按照时间排序</label>
                            </li>
                            <li class="layout">
                                <input type="radio" name="sort" id="sort-three">
                                <label for="sort-three">按照评价排序</label>
                            </li>
                        </ul>
                        <label for="" class="layout"><input type="checkbox">可播放</label>
                    </form>
                    <ul class="layout layout44">
                        
                    </ul>
                </section>
                <section class="page-turning">
                    <ul class="layout">
                        <li><a href="">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li><a href="">···</a></li>
                        <li><a href="">23802</a></li>
                        <li><a href="">下一页</a></li>
                    </ul>
                </section>
            </article>
            <input type="radio" id="show3" name="showone">
            <article class="main-three">
                <i class="show showthree"></i>
                <p class="show-1 showtwo-3">经典影片</p>
                <section class="catalogue">
                    <nav class="layout">
                        <p>类型:</p>
                        <ul class="layout layout11">
                            
                        </ul>
                    </nav>
                    <nav class="layout">
                        <p>地区:</p>
                        <ul class="layout layout22">
                            
                        </ul>
                    </nav>
                    <nav class="layout">
                        <p>时间:</p>
                        <ul class="layout layout33">
                            
                        </ul>
                    </nav>
                </section>
                <section class="film-play">
                    <form action="" class="sort layout">
                        <ul class="layout">
                            <li class="layout">
                                <input type="radio" name="sort" id="sort-one" checked>
                                <label for="sort-one">按照热门排序</label>
                            </li>
                            <li class="layout">
                                <input type="radio" name="sort" id="sort-two">
                                <label for="sort-two">按照时间排序</label>
                            </li>
                            <li class="layout">
                                <input type="radio" name="sort" id="sort-three">
                                <label for="sort-three">按照评价排序</label>
                            </li>
                        </ul>
                        <label for="" class="layout"><input type="checkbox">可播放</label>
                    </form>
                    <ul class="layout layout44">
                        
                    </ul>
                </section>
                <section class="page-turning">
                    <ul class="layout">
                        <li><a href="">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li><a href="">···</a></li>
                        <li><a href="">23802</a></li>
                        <li><a href="">下一页</a></li>
                    </ul>
                </section>
            </article>
        </main>
        <!-- 底部 -->
        <footer>
            <nav>
                <ul class="layout">
                    <li>
                        <a href="#/homepages">关于我们</a>
                    </li>
                    <li>
                        <a href="#/homepages">管理团队</a>
                    </li>
                    <li>
                        <a href="#/homepages">投资者关系</a>
                    </li>
                    <li>
                        <a href="#/homepages">美团网</a>
                    </li>
                    <li>
                        <a href="#/homepages">格瓦拉</a>
                    </li>
                    <li>
                        <a href="#/homepages">美团下载</a>
                    </li>
                </ul>
            </nav>
            <p>商务合作邮箱：v@maoyan.com客服电话：10105335违法和不良信息举报电话：4006018900</p>
            <p>北京猫眼文化传媒有限公司</p>
        </footer>
        `)
    }

    handle() {
        //渲染类型
        $.ajax({
            type: "post",
            url: "/api/platoon/getallmovie",
            dataType: "json",
            success(data) {
                let s = ""
                data.forEach((item) => {
                    s += `${item.type}`
                })
                let set = new Set(s.split(" "))
                let arr = [...set].slice(1)
                let str = `
                <input type="radio" id="type01" name="movie" checked>
                <li class="layout"><label for="type01">全部</label></li>
                `
                let number = 2
                arr.forEach((item) => {
                    str += `
                    <input type="radio" id="type${number++}" name="movie">
                    <li class="layout"><label for="type${number++}">${item}</label></li>
                    `
                })
                $(".layout11").html(str)
            }
        })
        //渲染地区
        $.ajax({
            type: "post",
            url: "/api/platoon/getallmovie",
            dataType: "json",
            success(data) {
                let s = ""
                data.forEach((item) => {
                    s += ` ${item.area}`
                })
                let set = new Set(s.split(" "))
                let arr = [...set].slice(1)
                let str = `
                <input type="radio" id="typ1" name="movi1" checked>
                <li class="layout"><label for="typ1">全部</label></li>
                `
                let number = 2
                arr.forEach((item) => {
                    str += `
                    <input type="radio" id="typ${number}" name="movi1">
                    <li class="layout"><label for="typ${number}">${item}</label></li>      
                    `
                })
                $(".layout22").html(str)
            }
        })
        //渲染上映时间
        $.ajax({
            type: "post",
            url: "/api/platoon/getallmovie",
            dataType: "json",
            success(data) {
                let s = ""
                data.forEach((item) => {
                    s += ` ${item.upDate}`
                })
                let set = new Set(s.split(" "))
                let arr = [...set].slice(1)
                let str = `
                <input type="radio" id="typl-1" name="movi2" checked>
                <li class="layout"><label for="typl-1">全部</label></li>
                `
                let number = 2
                arr.forEach((item) => {
                    str += `
                    <input type="radio" id="typl-${number++}" name="movi2">
                    <li class="layout"><label for="typl-${number++}">${item}</label></li>
                    `
                })
                $(".layout33").html(str)
            }
        })
        // 渲染下面电影
        $.ajax({
            type: "post",
            url: "/api/platoon/getallmovie",
            dataType: "json",
            success(data) {
                let str = "";
                for (let i = 0; i < 3; i++) {
                    data.forEach((item) => {
                        str += `
                        <li data-movieid=${item._id}>
                        <img src="http://127.0.0.1:4000/photos/${item.images[0]}" alt="">
                        <p>${item.cname}</p>
                        <i>${item.score}</i>
                        </li>
                        `
                    })
                }
                $(".layout44").html(str)
            }
        })
        $(".layout44").on("click", "li", function () {
            window.location.hash = `#/moviederails?${this.dataset.movieid}`
        })

    }
}